<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 800px;
            height: 300px;
            background-color: coral;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 
        鼠标事件 事件对象:
                onclick
                onmouseover
                onmouseout
                onmousemove
            事件对象: 
                event
                preventDefault();
                stopPropagation();
                clientX 相对浏览器的视窗的坐标
                clientY 相对浏览器的视窗的坐标
                screenX 相对屏幕的视窗的坐标
                screenY 相对屏幕的视窗的坐标
     -->

    <div>

    </div>
    <script>
        document.querySelector("div").onmousemove=function(e)
        {
            this.innerHTML='clienX:'+e.clientX+'clienY:'+e.clientY+'screenX:'+e.screenX+'screenY:'+e.screenY
        }
    </script>
    
</body>
</html>